<template>
  <div class="dashboard-container">
    <div class="breadcrumb-container flex-row" style="height:15px">
      <!-- <breadcrumb /> -->
      <!-- <div class="rightTwo">
        <p @click="toPage"><i class="el-icon-s-grid" />时间轴</p>
        <p @click="toGo"> 转出</p>
        <p @click="showDeleteModal"> 删除</p>
      </div> -->
    </div>
    <!-- <el-divider /> -->
    <div class="overview-content">
      <!-- <scr-list />
      <list-table /> -->
      <el-row :gutter="32" style="margin-left:0;margin-right:0">
        <el-col :xs="24" :sm="24" :lg="24" style="margin-bottom:0px;" class="bgfff">
          <div class="chart-wrapper">
            <ul class="ulOne">
              <li>
                <p>
                  <span class="spanone">
                    <i v-if="objHtml.gender != null " class="fs-18"><span>{{ objHtml.name }}</span> ／ {{ objHtml.gender == 'MALE'? '男':'女' }}／{{ objHtml.idCard }}</i>
                    <i v-if="objHtml.gender == null" class="fs-18"><span>{{ objHtml.name }}</span> ／ 未知／{{ objHtml.idCard }}</i>
                  </span>
                </p>

              </li>
            </ul>
            <ol class="olOne">
              <li>
                <i>电话</i>
                <el-tooltip class="item" effect="dark" :disabled="isDisabledTooltip" :content="objHtml.mobile" placement="top-start">
                  <!-- <span>{{ objHtml.mobile }}</span> -->
                  <div :class="['ellipsisDiv','t1']" @mouseover="onMouseOver('t1')" @mouseout="out">
                    <span ref="t1"> {{ objHtml.mobile }}</span>
                  </div>
                </el-tooltip>
              </li>
              <li>
                <i>邮箱</i>
                <!-- <span>{{ objHtml.email }}</span> -->
                <el-tooltip class="item" effect="dark" :disabled="isDisabledTooltip" :content="objHtml.email" placement="top-start">
                  <div :class="['ellipsisDiv','t2']" @mouseover="onMouseOver('t2')" @mouseout="out">
                    <span ref="t2"> {{ objHtml.email || '暂无' }}</span>
                  </div>
                </el-tooltip>
              </li>
              <li>
                <i>职业</i>
                <!-- <span>{{ objHtml.job || '暂无' }}</span> -->
                <el-tooltip class="item" effect="dark" :disabled="isDisabledTooltip" :content="objHtml.job" placement="top-start">
                  <div :class="['ellipsisDiv','t3']" @mouseover="onMouseOver('t3')" @mouseout="out">
                    <span ref="t3">{{ objHtml.job || '暂无' }}</span>
                  </div>
                </el-tooltip>
              </li>
              <li>
                <i>APP账号</i>
                <!-- <span>{{ objHtml.appAccount || '暂无' }}</span> -->
                <el-tooltip class="item" effect="dark" :disabled="isDisabledTooltip" :content="objHtml.appAccount || '暂无'" placement="top-start">
                  <div :class="['ellipsisDiv','t4']" @mouseover="onMouseOver('t4')" @mouseout="out">
                    <span ref="t4">{{ objHtml.appAccount || '暂无' }}</span>
                  </div>
                </el-tooltip>
              </li>
              <li style="margin-right:108x">
                <i>住址</i>
                <!-- <span>{{ objHtml.province }}{{ objHtml.city }}{{ objHtml.district }}{{ objHtml.address }}</span> -->
                <el-tooltip class="item" effect="dark" :disabled="isDisabledTooltip" :content="objHtml.province + objHtml.city + objHtml.district + objHtml.address" placement="top-start">
                  <div :class="['ellipsisDiv','t5']" @mouseover="onMouseOver('t5')" @mouseout="out">
                    <span v-if="objHtml.province != null && objHtml.province != ''" ref="t5">{{ objHtml.province + objHtml.city + objHtml.district + objHtml.address }}</span>
                    <span v-else ref="t5">暂无</span>
                  </div>
                </el-tooltip>
              </li>
              <li style="flex:1">
                <i>备注</i>
                <!-- <span><em>{{ objHtml.note }}</em></span> -->
                <el-tooltip class="item" effect="dark" :disabled="isDisabledTooltip" :content="objHtml.note" placement="top-start">
                  <div :class="['t6']" @mouseover="onMouseOver('t6')" @mouseout="out">
                    <span ref="t6"><em>{{ objHtml.note || '暂无' }}</em></span>
                  </div>
                </el-tooltip>
              </li>
            </ol>
          </div>
        </el-col>
        <hr>
        <el-col :xs="24" :sm="24" :lg="24" style="margin-bottom:20px;padding-right:0" class="padLeft">
          <div class="chart-wrapper">
            <div class="title">
              <ul v-if="selectedTagList.length>0">
                <li v-for="tag in selectedTagList">{{ tag }}</li>
              </ul>
              <div v-else style="color: #2d2f33;font-size: 12px">请编辑标签</div>
              <p @click="toGoTag"><i class="el-icon-edit-outline" /></p>
            </div>
          </div>

        </el-col>
      </el-row>
      <div class="txtTabe"> <!--:table-data="arrTable"-->
        <el-table
          :data="tableData"
          style="width: 100%"

          class="card-table"
          :border="false"
          stripe
          :default-sort="{prop: 'five'}"
        >
          <el-table-column
            show-overflow-tooltip
            prop="address"
            label="地址"
            width="420"
            align="left"
            style="padding-left:15px"
          >
            <template slot-scope="scope">
              <router-link :to="{ path: '/house/pageDetail', query: { id: scope.row.id } }" class="linkBtn">
                {{ scope.row.address }}
              </router-link>
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="type"
            :formatter="houseTypeFormat"
            label="类型"
            min-width="50%"
            align="left"
          />
          <el-table-column
            show-overflow-tooltip
            prop="roomNumber"
            label="户型"
            min-width="50%"
            align="left"
          >
            <template slot-scope="scope">
              <span
                v-if="scope.row.roomNumber"
              >{{ scope.row.roomNumber }}房</span>
              <span
                v-if="scope.row.wcNumber"
              >{{ scope.row.wcNumber }}卫</span>
              <span
                v-if="scope.row.carRoomNumber"
              >{{ scope.row.carRoomNumber }}车库</span>
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="bdName"
            label="BD"
            min-width="50%"
            align="left"
          />
          <el-table-column
            show-overflow-tooltip
            prop="operatorName"
            label="运营"
            min-width="50%"
            align="left"
          />
          <el-table-column
            show-overflow-tooltip
            prop="createdTime"
            label="添加时间"
            min-width="50%"
            :formatter="dateFormatRow"
            align="left"
          />
          <el-table-column
            show-overflow-tooltip
            prop="status"
            :formatter="houseStatusFormat"
            label="状态"
            min-width="50%"
            align="left"
          />
        </el-table>
      </div>
      <div class="txtTabe"> <!--:table-data="arrTable"-->
        <h3>管理跟踪</h3>
        <ul>
          <li>
            <p class="p1" @click="showDiv = true">添加</p>
            <div class="odiv">
              <ol>
                <li v-for="(item,index) in yzArr" :key="index" :class="item.type!=0 ? 'not':''">
                  <i>{{ item.newcreatedTime }}</i>
                  <div class="ph5">
                    <h5>
                      <em class="acy">
                        <i style="color:#151515;font-size:13px;" :class="item.createdBy == '系统' || item.createdBy == 'system'?'ccc':''">{{ item.createdBy }}</i>
                        {{ item.remindNames.length >= 1? item.remindNames.join(" "):'' }}
                      </em>
                      <span v-if="item.createdBy != '系统'&&item.executeTime!= item.createdTime">执行时间:{{ dateFormat(item.executeTime) }}</span>
                      <p :class="item.createdBy == '系统' || item.createdBy == 'system'?'ccc1':''">{{ item.remark }}</p>
                    </h5>
                    <p class="p9">

                      <dfn v-for="(list,listindex) in item.attachmentNames" v-if="item.attachmentNames && item.attachmentNames.length > 0" :key="listindex" style="cursor: pointer;" class="ulMy" @click="openPng(index,listindex)">
                        <el-tooltip class="item" effect="dark" :content="list" placement="top-start">

                          <dfn class="listStyle">{{ list }}</dfn>
                        </el-tooltip>
                      </dfn>

                      <!-- <dfn style="cursor: pointer;"  && item.createdBy != '系统' @click="openPng(item.attachment)" class="ulMy" v-if="item.attachmentNames && item.attachmentNames.length > 0">{{item.attachmentNames.join(",")}}</dfn> -->
                    </p>
                  </div>
                </li>
              </ol>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!---->

    <!---->
    <myModal :obj="objFour" @close="close" @save="save">
      <div class="mpdalBody">
        <ul class="ulFive">
          <li
            v-for="(item,index) in tagList"
            :key="index"
            :class="{'active':item.active}"
            @click="liActive(item,index)"
          >{{ item.name }}<i v-if="item.active" class="el-icon-check susse" /></li>
        </ul>
      </div>
    </myModal>
    <!---->
    <!---->
    <el-dialog title="" width="770px" custom-class="myDigo inputTop" :show-close="false" :visible.sync="showDiv" :close-on-click-modal="false">
      <h2>添加记录 <i class="el-icon-close" @click="close1" /></h2>
      <!---->
      <div>
        <el-form ref="form" :model="sizeForm" label-width="85px" class="formDiv">
          <el-form-item label="记录内容:" :required="true">
            <el-input
              v-model="textarea"
              type="textarea"
              placeholder="请输入内容"
              maxlength="200"
              show-word-limit
            />
          </el-form-item>
          <el-form-item label="附件:">
            <DragImage v-if="showDiv" v-model="sizeForm.fileUrl" maxcount="100" class="myUnip" :urls="sizeForm.fileUrl" format="png,pdf,jpg,jpeg,mp4" :houseid="houseid" @getImage="changePoster" />
          </el-form-item>
          <el-form-item label="提醒:">
            <el-checkbox-group v-model="checkList">
              <el-checkbox v-for="(item,index) in arr" :key="index" :label="item.id">{{ item.englishName!=''?item.englishName:item.name }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="执行时间:">
            <el-date-picker
              v-model="executeTime"
              type="date"
              format="yyyy-MM-dd"
              placeholder="无"
              style="width:260px"
            />
          </el-form-item>
          <!---->
          <!---->
        </el-form>
      </div>
      <!---->
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" :disabled="disabled" @click="saveDiv()">确 认</el-button>
        <el-button class="grey-btn" @click="showDiv = false">取 消</el-button>
      </div>
    </el-dialog>
    <!---->
  </div>
</template>

<script>
import Breadcrumb from '@/components/Breadcrumb'
import myModal from '@/components/Modal'
import { pageDetail, updateTag, update, add, removeHouse, pageByOwnerId } from '@/api/house'
import { list } from '@/api/area'
import { listByRole, getById, tagYZ, getTagyz, saveTags, saveTimeLine, getTimeLine } from '@/api/manager'
import { listByMobile } from '@/api/owner'
import { getHouseOwnerByHouseId, addHouseOwner } from '@/api/houseOwner'
import { getHouseViewListByHouseId, batchAdd } from '@/api/houseView'
import { getTagList } from '@/api/tag'
import { houseTypeFormat2, houseStatusFormat2, measureTypeFormat2, houseTypeFormat, houseStatusFormat, dateFormatRow, dateFormat } from '@/utils/common'
import Upload from '@/components/Upload/SingleImage'
import DragImage from '@/components/Upload/DragImage'
import {
  houseTypeOptions,
  houseStatusOptions,
  roomNumOptions,
  measureTypeOptions
} from '@/utils/consts'
export default {
  name: 'PagePermission',
  components: { Breadcrumb, myModal, Upload, DragImage },
  data() {
    return {
      dateFormat,
      isDisabledTooltip: true,
      dateFormatRow,
      disabled: true,
      houseStatusFormat,
      houseTypeFormat,
      executeTime: undefined,
      listQuery: {
        page: 1,
        limit: 100,
        owner: ''
      },
      showDiv: false,
      id: undefined,
      tableData: [],
      listImgHx: [],
      listImgXq: [],
      listImgZt: [],
      houseOwner: {},
      houseViewList: {},
      ownerList: [],
      reasonList: ['房产已被其他中介售出', '房产已被本公司售出', '业主收回自住', '业主转至其他中介管理', '业主转至其他中介出售'],
      BDList: [],
      propertyList: [],
      salesManList: [],
      operatorManList: [],
      objHtml: {},
      imageList: [],
      layoutImageList: [],
      selectedTagList: [],
      tagList: [],
      stateListOptions: [],
      indexList: [],
      countryListOptions: [],
      countyListOptions: [],
      selectedCountry: {},
      selectedCounty: {},
      show: false,
      rules: {
        title: [{ required: true, message: '名称必填', trigger: 'change' }],
        subtitle: [{ required: true, message: '描述必填', trigger: 'change' }],
        content: [{ required: true, message: '详情必填', trigger: 'change' }],
        poster: [{ required: true, message: '请上传封面图', trigger: 'change' }]
      },
      ownerForm: {
        ownerFirst: '',
        ownerSecond: '',
        ownerThree: '',
        ownerFour: '',
        bd: '',
        operator: '',
        propertyManager: '',
        saleManager: ''
      },
      value: '',
      selectedState: {},
      userList: [],
      obj: {
        show: false,
        title: '请选择转出理由',
        width: '515px'
      },
      deleteobj: {
        show: false,
        title: '删除房产',
        width: '515px'
      },
      objTwo: {
        show: false,
        title: '业主及管理人员',
        width: '515px'
      },
      objThree: {
        show: false,
        title: '可查看该房产账号',
        width: '615px'
      },
      objFour: {
        show: false,
        title: '你可为该业主打上标签',
        width: '515px'
      },
      houseTypeFormat2,
      houseStatusFormat2,
      measureTypeFormat2,
      postForm: {},
      houseTypeOptions,
      houseStatusOptions,
      roomNumOptions,
      measureTypeOptions,
      item: {},
      arr: [],
      textarea: '',
      sizeForm: {
        businessId: '',
        type: 1,
        fileUrl: ''
      },
      listImgXq: [],
      fileUrl: [],
      houseid: '',
      objDiv: {
        businessId: '',
        type: 1
      },
      yzArr: [],
      checkList: []
    }
  },
  computed: {
    listenStoreMsg() {
      return this.$store.state.user.msg
    }
  },
  watch: {
    textarea(val) {
      if (val != '' && val != undefined && val != null) {
        this.disabled = false
      } else {
        this.disabled = true
      }
    }
  },
  created() {
    this.id = this.$route.query.id
    this.listQuery.owner = this.id
    this.init(this.id)

    // this.getOwner()  getById
  },
  methods: {
    onMouseOver(str) {
      const parentWidth = this.$refs[str].parentNode.offsetWidth
      const contentWidth = this.$refs[str].offsetWidth
      this.isDisabledTooltip = contentWidth <= parentWidth
    },
    openPng(val, listval) {
      if (typeof this.yzArr[val].attachment === 'string') {
        window.open(this.yzArr[val].attachment, '_blank')
      } else {
        window.open(this.yzArr[val].attachment[listval], '_blank')
      }
    },
    changePoster(val, status, name) {
      this.sizeForm.fileUrl = val.toString()

      return
      if (status == 'add') {
        //   this.sizeForm.fileUrl.push(val.toString())
        this.sizeForm.fileUrl = val.toString()
        console.log(this.sizeForm.fileUrl)
      } else {
        this.sizeForm.fileUrl.forEach((item, index) => {
          if (item.indexOf(name) > -1) this.sizeForm.fileUrl.splice(index, 1)
        })
      }
    },
    saveDiv() {
      // || this.checkList.length <= 0
      if (this.sizeForm.remark == '') {
        this.$notify({
          title: '失败',
          message: '请添加必填项',
          type: 'error',
          duration: 2000
        })
        return
      }

      console.log(this.sizeForm.fileUrl)
      this.sizeForm.attachment = this.sizeForm.fileUrl
      this.sizeForm.businessId = this.houseid
      this.sizeForm.remark = this.textarea
      this.sizeForm.remindId = this.checkList.join(',')
      this.sizeForm.type = 1
      this.sizeForm.businessId = this.id
      if (this.executeTime != undefined) {
        this.sizeForm.executeTime = new Date(this.executeTime).getTime()
      }
      saveTimeLine(this.sizeForm).then(response => {
        this.showDiv = false
        this.$notify({
          title: '成功',
          message: '添加成功',
          type: 'success',
          duration: 2000
        })
        this.sizeForm = {}
        this.fileUrl = ''
        this.textarea = ''
        this.sizeForm.fileUrl = ''
        this.checkList = []
        this.executeTime = undefined
        this.init(this.id)
      })
    },
    liActive(item, index) {
      const that = this
      if (this.tagList[index].active === true) {
        this.tagList[index].active = false
      } else {
        this.tagList[index].active = true
      }

      this.selectedTagList = []
      this.tagList.forEach(function(item) {
        if (item.active === true) {
          that.selectedTagList.push(item.name)
        }
      })
    },
    async init(id) {
      this.arr = []
      pageByOwnerId(this.listQuery).then(response => {
        this.tableData = response.data.records
        // this.total = response.data.total

        this.listLoading = false
      })
      await getById(id).then(response => {
        this.objHtml = response.data
        if (response.data.tags != '') {
          if (response.data.tags.indexOf(',')) {
            this.selectedTagList = response.data.tags.split(',')
          } else {
            this.selectedTagList.push(response.data.tags)
          }
        } else {
          this.selectedTagList = []
        }
      })

      listByRole(1).then(response => {
        this.arr = this.arr.concat(response.data)
      })
      listByRole(2).then(response => {
        this.arr = this.arr.concat(response.data)
      })
      this.objDiv.businessId = this.$route.query.id
      getTimeLine(this.objDiv).then(response => {
        response.data.forEach((item) => {
          item.newcreatedTime = this.formatDate(item.createdTime)
          if (item.attachmentNames && item.attachmentNames.length > 1) {
            item.attachmentNames = [...item.attachmentNames]
            item.attachment = [...(item.attachment.split(','))]
          }
          if (item.remindNames != null && item.remindNames.length >= 1) {
            item.remindNames = item.remindNames.map((list) => {
              return list = '@' + list
            })
          } else {
            item.remindNames = []
          }
        })
        this.yzArr = response.data
      })
      // getTagyz(id).then(response => {
      //
      // })
      // tagYZ(0).then(response => {
      //   this.tagList = response.data
      //   if (this.tagList !== null) {
      //     this.tagList.forEach(function(item) {
      //       that.selectedTagList.forEach(function(item2) {
      //         if (item2 === item.name) {
      //           item.active = true
      //         }
      //       })
      //     })
      //   }
      // })
      await getTagList('OWNER_TAG').then(response => {
        const that = this
        this.tagList = response.data
        if (this.tagList !== null) {
          this.tagList.forEach(function(item) {
            that.selectedTagList.forEach(function(item2) {
              if (item2 === item.name) {
                item.active = true
              }
            })
          })
        }
      })
    },
    showDeleteModal() {
      this.deleteobj.show = true
    },
    toGoTag() {
      this.objFour.show = true
    },
    save() {
      // let that = this
      // let data = this.objHtml
      // data.tag = this.selectedTagList.join(',')
      // updateTag(data).then(response => {
      //   console.log(response)
      //   that.close()
      // })
      // //  以上是房产 下面是   /admin/manager/addTag添加业主标签   具体请看sw
      const that = this
      const data = this.objHtml
      data.tags = this.selectedTagList.join(',')
      saveTags(data).then(response => {
        that.close()
      })
    },
    toPage(use) {
      this.$router.push({ path: 'pageTime' })
    },
    toGo() {
      this.obj.show = true
    },
    close(val) {
      this.obj.show = val
      this.objTwo.show = val
      this.objThree.show = val
      this.objFour.show = val
      this.deleteobj.show = val
      this.show = val
      this.init(this.id)
    },
    formatDate(date) {
      var date = new Date(date)
      var YY = date.getFullYear() + '-'
      var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate())
      var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
      var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
      var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
      return YY + MM + DD + ' ' + hh + mm + ss
    },
    close1() {
      this.showDiv = false
      this.sizeForm = {}
      this.fileUrl = []
      this.textarea = ''
      this.sizeForm.fileUrl = ''
      this.checkList = []
      this.executeTime = undefined
    },
    out() {
      this.isDisabledTooltip = true
    }
  }
}
</script>

<style lang="scss" scoped>
ul,ol{margin: 0;padding: 0;}
ul li,ol li{list-style: none;}
i,em{font-style: normal;}
.txtTabe ol li h5{font-weight: normal;position: relative;}
.txtTabe ol li h5 em{padding: 15px 15px 10px 15px;font-size: 13px;display: block;text-align: left;width: 80%;font-weight: bold;}
.txtTabe ol li div{flex: 1;background: #fff;margin-left: 15px;margin-bottom: 15px;min-height: 68px;white-space: normal;
    word-break: break-all;}
.ccc{color: #ccc!important;}
.ccc1{color: #ccc!important;font-size: 12px!important;}
.breadcrumb-container {
  position: relative;
  width: 100%;
  height: 30px;
  padding: 0 14px;
  background: #eee;
  // &::after {
  //   content: '';
  //   position: absolute;
  //   left: 0px;
  //   top: 50%;
  //   width: 2px;
  //   height: 37px;
  //   background-color: #5AC6B7;
  //   transform: translateY(-50%);
  // }
}
.txtTabe ol li i{align-self: flex-start;margin-top: 25px;color: #6a6a6a;font-size: 13px;word-break: break-word;}

.overview-content{padding: 10px;background: #eee;}
.rightTwo{position: absolute;top: -13px;right: 25px;width: 180px;font-size: 12px;color: #5AC6B7;}
.rightTwo p{display: inline-block;margin-left: 8px;padding-top: 5px;cursor: pointer;}
.rightTwo p:nth-child(1){margin-right: 50px;}
.ulOne{background: #5AC6B7;}
.acy{color: #5AC6B7;}
.ulOne li{display: flex;justify-content: space-between;align-items: center;color: #fff;padding-left: 25px!important;}
.ulOne li p{display: flex;justify-content: flex-start;align-items: center;font-size: 12px;}
.ulOne li p span.el-icon-s-home{font-size: 42px;}
.ulOne li p span em{font-size: 18px;}
.ulOne li p span i{font-size: 18px;}
.ulOne li p span.spanone{flex: 1;margin-left: 0px;}
.ulOne li p span.spanone em{display: block;font-weight: bold;margin-bottom: 8px;}
.ulOne li{padding-left: 20px;padding-right: 20px;box-sizing: border-box;}
.ulOne li p i.el-icon-edit-outline{font-size: 26px;}
.colli{color: #b5b5b5;font-size: 13px;text-align: center;padding-left: 0!important;}
.olOne{width: 100%;display: flex;justify-content: flex-start;align-items: center;padding-left: 25px;padding-right: 25px;}
.olOne li{margin-top: 15px;font-size: 16px;margin-left: 0px;margin-right: 30px; color: #353535;width: 150px;}
.olOne li i{display: block;color: #ddd;margin-top: 30px;margin-bottom: 19px; font-size: 12px;margin-bottom: 19px;}
div.bgfff{background: #fff;padding: 0!important;height: 200px;max-height: 200px;
// height: 440px;max-height: 440px;
overflow-y:auto;}
.imgAll{margin-top: 15px;padding-left: 10px;overflow: hidden;}
.imgAll span{display: block;color: #000;font-weight: normal;font-size: 12px;margin-bottom: 10px;}
.olOne li em{color: #b5b5b5;}
.olOne li{font-size: 16px;margin-bottom: 10px;align-self: flex-start;}
.olOne li em.emSall{color: #5AC6B7;font-size: 16px;font-weight: normal;}
.olOne li em.emBig{color: #5AC6B7;font-size: 16px;font-weight: normal;}
.olOne li em.emSallc{color: #919191;font-size: 16px;font-weight: normal;}
.olOne li span{font-weight: normal;color: #101010;font-size: 16px;}
.twoFlex{display: flex;flex-direction: column;justify-content: space-between;height: 200px;max-height: 200px;overflow-y:auto;}
.ulTwo{background: #f6f7f9;}
.ulTwo li{display: flex;justify-content: space-between;align-items: center;color: #000;}
.ulTwo li p{display: flex;justify-content: flex-start;align-items: center;cursor: pointer;}
.ulTwo li p span.el-icon-user-solid{font-size: 45px;color: #cecece;}
.ulTwo li p span em{font-size: 18px;}
.ulTwo li p span i{font-size: 13px;}
.ulTwo li p span.spanone{flex: 1;margin-left: 15px;}
.ulTwo li p span.spanone em{display: block;font-weight: normal;color: #101010;}
.ulTwo li{padding-left: 20px;padding-right: 20px;box-sizing: border-box;}
.ulTwo li p i.el-icon-edit-outline{font-size: 24px;color: #cecece;}
.olTwo li em{color: #b5b5b5;}
.olTwo li{font-size: 12px;}
.olTwo li em.emSall{color: #5AC6B7;font-size: 16px;font-weight: normal;}
.olTwo li em.emBig{color: #5AC6B7;font-size: 15px;font-weight: bold;}
.olTwo li em.emSallc{color: #919191;font-size: 14px;font-weight: normal;}
.olTwo li span{font-weight: bold;}
.olTwo,.olThree{width: 100%;display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;padding-left: 25px;padding-right: 25px;}
.olTwo li{width: 25%;margin-top: 20px;}
.olTwo li i{display: block;color: #b5b5b5;font-size: 12px;margin-bottom: 10px;}
.olTwoJus{justify-content: flex-start;}
.divPad{padding-top: 15px;padding-bottom: 30px;background: #fff;}
.olThree{color: #5AC6B7;font-size: 15px;font-weight: bold;}
.divThree{background: #fff;padding:15px 0;height: 125px;}
.divThree li{line-height: 30px;font-size: 12px;}
.title{display: flex;justify-content: space-between;border-top: 1px solid #f2f2f2; align-items: center;background: #fff;padding-left: 25px;padding-right: 20px;}
.title ul{display: flex;justify-content: flex-start;}
.title li{border: 1px solid #5AC6B7;background: #5AC6B7;color: #fff;font-size: 12px;padding: 5px 10px;border-radius: 35px;margin-right: 10px;font-family: 'Roboto';}
.padLeft{padding-left: 0!important;}
.title i{font-size: 26px;color: #868686;cursor: pointer;}
::v-deep .myUnip ul{width: 50%;}
.imgW{
  max-width:100%;
   max-height:100%;
   display: block;
   margin-bottom: 4px;
   width: 75px;
   height: 56px;
   margin-left: auto;
   margin-right: auto;
   }

.mpdalBody{padding-left: 39px;padding-right: 39px;padding-top: 15px;padding-bottom: 15px;}
.btnScr{width: 100%;}
.ulFour{display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;}
.ulFour li{width: 33.3%;box-sizing: border-box;margin-bottom: 10px;}
.ulFour li em{position: relative;}
.ulFour li i{position: absolute;right: -8px;top: -4px;color: #ff0000;border-radius: 50%;width: 12px;height: 12px;line-height: 10px;text-align: center;border: 1px solid #ff0000;display: block;font-size: 12px;}
.list li:nth-child(1n){text-align: left;}
.list li:nth-child(2n){text-align: center;}
.list li:nth-child(3n+1){text-align: right;}
.ulFive{display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;}
.ulFive li{width: 32%;cursor: pointer; color: #d9d9d9;min-height: 23px; padding: 4px 8px;border: 1px solid #d9d9d9;border-radius: 35px;margin-bottom: 15px;font-size: 12px;text-align: center;}
.ulFive li.active{color: #808080;border: 1px solid #5AC6B7;border-radius: 35px;}
.susse{color: #5AC6B7;}

.mtright{
    margin-right: 5px;
}
.right20{margin-left: 20px;}
::v-deep .itxt label{font-weight: normal;font-size: 12px;}

.myDigo h2{background: #343436;}
::v-deep .myDigo .el-dialog__footer{background: #E5E9ED;padding-top: 15px;}
::v-deep .el-dialog.myDigo .el-dialog__body{padding: 0;}
::v-deep .el-dialog.myDigo .el-dialog__header{display: none;}
.el-dialog.myDigo h2{height: 58px;display: flex;justify-content: space-between;align-items: center;padding-left: 39px;padding-right: 39px;color: #fff;padding-top: 0;
    margin-top: 0;overflow: hidden;font-size: 18px; padding-top: 0;
    margin-top: 0;overflow: hidden;font-weight: normal;font-family: 'SourceHanSansSC-regular';}
.el-dialog.myDigo h2 i{font-size: 26px;cursor: pointer;}
::v-deep  .el-dialog.myDigo  .el-dialog__body{text-align: left;}

.add{background: #5AC6B7;color: #fff;border: 0;border-radius: 2px;}
.flex{display: flex;justify-content: space-between;align-items: center;padding-right: 8px!important;}
.btnScr{width: 100%;margin-bottom: 15px;}
::v-deep .btnScr input{border-radius:2px;}
.btnScrright{border-radius:2px;margin-top: -15px;}
.agg{padding-left:8px!important;padding-right: 8px!important;}

.borbtoonline{border-bottom: 1px solid #f2f2f2;padding-bottom: -15px;}
.bortopline{margin-top: 15px;}
.borbtoonline .el-form-item{margin-bottom: 10px;}
.formDiv{padding-left: 39px;padding-right: 39px;}
 ::v-deep .el-upload-list__item-thumbnail{width: 100%;padding-right: 0px;max-width: 70px;max-height: 56px;}
 .mtright  ::v-deep  .el-form-item__label{padding: 0 10px 0 0;}

 ::v-deep .itxt label{font-weight: normal;font-size: 12px;}
::v-deep .itxt {margin-bottom: 15px;}
::v-deep .itxtactive label{color: #5AC6B7;}
::v-deep  .el-upload--picture-card{width: 70px!important;height: 56px;line-height: 66px;vertical-align: sub;}
::v-deep .el-upload__text{line-height: initial;color: #cacaca;margin-top: -10px;font-size: 12px;}
::v-deep  .el-upload-list--picture-card .el-upload-list__item{width: 70px;height: 56px;}
::v-deep .upload-demo{width: 384px;}
::v-deep .el-table th > .cell{padding-left: 25px;}
::v-deep .el-table td > .cell{padding-left: 25px;}
</style>

<style>
@media (min-width:1200px) {
        .inputTop input::-webkit-input-placeholder, textarea::-webkit-input-placeholder , select::-webkit-input-placeholder{
          font-size: 12px;
        }

        .inputTop input:-moz-placeholder, textarea:-moz-placeholder , select::-webkit-input-placeholder{
          font-size: 12px;
        }

        .inputTop input::-moz-placeholder, textarea::-moz-placeholder , select::-webkit-input-placeholder{
          font-size: 12px;
        }

        .inputTop input:-ms-input-placeholder, textarea:-ms-input-placeholder , select::-webkit-input-placeholder{
          font-size: 12px;
        }
}
</style>

<style lang="scss" scoped>
.listStyle{width: 100%;display: block;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;padding-bottom: 1px;}
.txtTabe h3{background: #cacaca;color: #575757;font-size: 16px;padding: 15px 25px;}
.txtTabe ul li{padding-left: 20px;display: flex;justify-content: flex-start;width: 100%;}
.txtTabe ol li{display: flex;justify-content: flex-start;align-items: center;width: 100%;}
.txtTabe ol li span{color: #101010;font-size: 12px;margin-right: 20px;position: absolute;top: 15px;right: 0;}
.txtTabe ol li p{background: #fff;padding: 0 15px 10px 15px;width: 100%;word-break: break-all;margin: 0;}
.txtTabe ol li p.p9{padding-bottom: 15px;}
.txtTabe ol li p i{color: #151515;font-size: 13px;display: block;margin-bottom: 5px;}
.txtTabe ol li p em{color: #6a6a6a;font-size: 12px;}
.txtTabe ul{display: flex;justify-content: flex-start;width: 70%;}
.odiv{width: 100%;}
.txtTabe p.p1{width: 105px;height: 33px;margin-top: 0;margin-left: 5px;cursor: pointer; margin-right: 40px; background: #fff;color: #5AC6B7;font-family: 'Roboto';border-radius: 3px;text-align: center;line-height: 33px;}
    .tags-view-wrapper {
      .tags-view-item {
        display: inline-block;
        position: relative;
        cursor: pointer;
        height: 26px;
        line-height: 26px;
        border: 1px solid #d8dce5;
        color: #495060;
        background: #fff;
        padding: 0 8px;
        font-size: 12px;
        margin-left: 5px;
        margin-top: 4px;
        &.active {
          background-color: #42b983;
          color: #fff;
          border-color: #42b983;
          &::before {
            content: '';
            background: #fff;
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            position: relative;
            margin-right: 2px;
          }
        }
      }
    }
    .contextmenu {
      margin: 0;
      background: #fff;
      z-index: 3000;
      position: absolute;
      list-style-type: none;
      padding: 5px 0;
      border-radius: 4px;
      font-size: 12px;
      font-weight: 400;
      color: #333;
      box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
      li {
        margin: 0;
        padding: 7px 16px;
        cursor: pointer;
        &:hover {
          background: #eee;
        }
      }
    }
.ulMy li h5 i{text-align: left!important;}
.ulMy li h5 p{margin-top: 10px;}
// .txtTabe ol li h5 i{text-align: left!important;}
.txtTabe ol li h5 p{color: #6a6a6a;}
</style>
<style lang="scss">
.ellipsisDiv{overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
.el-table th.is-leaf, .el-table td{border-bottom: 0;}
.ph5 h5{margin-bottom: 0;margin-top: 10px;text-align: left!important;}
.ulMy{
    color: #5AC6B7;
    margin-top: 3px;
    font-size: 12px;
    margin-top: 5px;
    width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    margin-right: 15px;
    padding-bottom: 1px;
}
.el-table th > .cell{color: #575757;}
.el-table th{background: #cacaca;}
  //reset element css of el-icon-close
  .tags-view-wrapper {
    .tags-view-item {
      .el-icon-close {
        width: 16px;
        height: 16px;
        vertical-align: 2px;
        border-radius: 50%;
        text-align: center;
        transition: all .3s cubic-bezier(.645, .045, .355, 1);
        transform-origin: 100% 50%;
        &:before {
          transform: scale(.6);
          display: inline-block;
          vertical-align: -3px;
        }
        &:hover {
          background-color: #b4bccc;
          color: #fff;
        }
      }
    }
  }
</style>
